<template>
  <div class="main">
    <el-container>
      <div>
        <el-header height="scrollerHeight">
          <nav-menu :info="info"></nav-menu>
          <web-banner></web-banner>
        </el-header>
        <el-main class="main">
          <div class="container">
            <el-row :gutter="20">
              <el-col :span="12">
                <!--视频介绍组件-->
                <detail-goods :videoInfo="videoInfo"></detail-goods>
                <!-- <el-card>
                  <router-link
                    :to="{
                      path: '/pay',
                      query: { video_id: this.$route.query.video_id },
                    }"
                    ><el-button>立刻购买</el-button></router-link
                  ></el-card
                > -->
              </el-col>
              <el-col :span="12">
                <price-chart></price-chart>
              </el-col>
            </el-row>
            <el-row>
              <!--视频tab简介组件-->
              <!-- <detail-tab
              :videoInfo="videoInfo"
              :chapterList="chapterList"
            ></detail-tab> -->
            </el-row>
          </div>
        </el-main>
        <!--底部立刻购买-->
        <el-footer>
          <div class="bottom"></div>
          <info-footer></info-footer>
        </el-footer>
      </div>
    </el-container>
  </div>
</template>

<script>
//引入组件
import DetailHeader from "./Components/Header";
import DetailGoods from "./Components/Goods";
import DetailTab from "./Components/Tab";

import { getVideoDetail } from "@/api/getData.js";
import { getUserInfo } from "@/api/getData.js";
import WebBanner from "../../components/WebBanner";
import NavMenu from "../../components/NavMenu.vue";
import PriceChart from "./Components/PriceChart.vue";
import InfoFooter from "../../components/InfoFooter";

export default {
  //注册组件
  components: {
    DetailHeader,
    DetailGoods,
    DetailTab,
    WebBanner,
    NavMenu,
    PriceChart,
    InfoFooter,
  },
  data() {
    return {
      //视频信息
      videoInfo: {},
      //章集
      chapterList: [],
      info: {},
    };
  },
  computed: {
    scrollerHeight: function () {
      return window.innerHeight - 46 - 50 + "px";
    },
    getToken() {
      return this.$store.state.token;
    },
  },

  methods: {
    //获取视频详情
    async getDetail(vid) {
      try {
        const result = await getVideoDetail(vid);
        if (result.data.code == 0) {
          this.videoInfo = result.data.data;
          this.chapterList = result.data.data.chapter_list;
        }
      } catch (error) {
        console.log(error);
      }
    },
    //getUserInfo
    async getInfo() {
      try {
        const result = await getUserInfo(this.getToken);
        this.info = result.data.data;
      } catch (error) {
        console.log("err!" + error);
      }
    },
  },

  mounted() {
    //渲染完成后拿数据
    console.log(this.$route.query.video_id);
    this.getDetail(this.$route.query.video_id);
    if (this.getToken) {
      this.getInfo();
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #f9f9f9;
}
.container {
  position: flex;
  align-content: center;
  padding-left: 10%;
  padding: 0 10px;
  box-sizing: border-box;
}
//底部
</style>